<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import="com.pmsco.pms.core.constant.PmsConstant"%>
<%@ page import="com.pmsco.pms.util.BundleUtil"%>
<%@ include file="/WEB-INF/import/tagLibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<%@ include file="/WEB-INF/import/jqGridCssAndJavascript.jsp" %>
</head>
<body class="pmsMainBody">
	<input type="hidden" name="selectedMedicineIds" id="selectedMedicineIds" value=""/>
	<table class="pmsMainTable">
		<tr class="pmsMainTableWrapperTd">
			<td>
				<table id="medicineList">
					<tr>
						<td>medicine data list will be show here</td>
					</tr>
				</table>
				<div id="medicinePager"></div>
			</td>
		</tr>
		<tr>
			<td>
				<table align="center">
					<tr>
						<td>
							<button id="deleteSelectedMedicine" class="tableFormButton" onclick="return deleteSelectedMedicineItems()"><spring:message code="button.deleteSelected"/></button>
							<button id="createMedicine" class="tableFormButton" onclick="submitAction('<%=PmsConstant.createMedicine_JspUrl%>')"><spring:message code="button.create"/></button>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	$("#medicineList").jqGrid({
		url: '<%=PmsConstant.listMedicineData_JspUrl%>',
		datatype: "json",
		autowidth: true,
		height: 500,
		jsonReader : { 
		      root: "rows", 
		      page: "page", 
		      total: "total", 
		      records: "records", 
		      repeatitems: false, 
		      cell: "", 
		      id: "id",
		      userdata: ""
		   },
		colNames: [
        	'<%=BundleUtil.getInstance().getKey("medicine.name")%>',
        	'<%=BundleUtil.getInstance().getKey("medicine.enName")%>',
        	'<%=BundleUtil.getInstance().getKey("medicine.visa")%>',
        	'<%=BundleUtil.getInstance().getKey("link.delete")%>'
       	],
		colModel: [
		    {name: 'name', index: 'name', width: 20, sorttype: "string"},
		    {name: 'enName', index: 'enName', width: 20, sorttype: "string"},
		    {name: 'visa', index: 'description', width: 60, sorttype: "string"},
		    {name: 'selected', width: 2, edittype: 'checkbox', formatter: "checkbox", editoptions: { value:"True:False" }, editable:true, formatoptions: {disabled : false}}
	    ],
	    rowNum:10, 
	    rowList:[10,20,30],
	    viewrecords: true,
	    pager: '#medicinePager',
	    sortorder: "desc",
	    sortname: 'name',
	    onSelectRow: function(rowid) {
	    	submitAction("<%=PmsConstant.editMedicine_JspUrl%>" + "?id=" + rowid);
	    }
	});

	//hide caption bar. no need this bar
	jQuery("#medicineList").jqGrid('navGrid','#medicinePager', {edit:false, add:false, del:false});
	$("#medicineList > .ui-jqgrid-titlebar").hide();
	$("#createMedicine").button();
	
	$("#deleteSelectedMedicine").button();
	
	function deleteSelectedMedicineItems() {
		var selectedMedicineIds = [];
		$("#medicineList td[aria-describedby='medicineList_selected'] input").each(function () {
				if($(this).attr('checked') == 'checked')
					selectedMedicineIds.push($(this).parent('td').parent('tr').attr('id'));
		});
		$("#selectedMedicineIds").val(selectedMedicineIds);
		return confirmAction("<%=PmsConstant.deleteMedicine_JspUrl%>", deleteMedicineDetailTitle, deleteMedicineDetailMessage);
	}
</script>
</html>